<template>
	<view>
		<scroll-view id="scrollView" scroll-y="true" :scroll-top="scrollTop"
		:scroll-with-animation="true"
		:style="{'height': style.contentH + 'px'}">
			<view class="m-f-jcc chat-load-more" hover-class="chat-load-more-hover" @tap="loadMore">{{loadText}}</view>
			<!-- 聊天列表 -->
			<block v-for="(item, index) in list" :key="index">
				<user-chat-list :item="item"></user-chat-list>
			</block>
		</scroll-view>
		<!-- 输入框 -->
		<user-chat-bottom @submit="submit"></user-chat-bottom>
	</view>
</template>

<script>
	import userChatBottom from '../../components/user-chat/user-chat-bottom.vue'
	import time from '../../common/time.js'
	import userChatList from '../../components/user-chat/user-chat-list.vue'
	export default {
		data() {
			return {
				scrollTop: 0,
				list: [],
				style: {
					contentH: 0,
					itemH: 0,
				},
				page: 1,
				loadText: '点击加载更多'
			}
		},
		components: {
			userChatBottom,
			userChatList,
		},
		onReady() {
			this.getData()
			this.initData()
		},
		methods: {
			initData() { // 初始化数据
				try {
					// API -> 设备 -> 系统信息
					const res = uni.getSystemInfoSync()
					this.style.contentH = res.windowHeight - uni.upx2px(120)
				} catch (e) {
					// error
				}
			},
			loadMore() { // 加载更多
				if (this.loadText !== '点击加载更多') return
				// 修改状态
				this.loadText = '加载中...'
				// 获取数据
				this.page++
				this.getData()
			},
			pageToBottom(isfirst = false) { // 获取页面触底事件（主要是为了发送信息时滚动条能自动变化触底）
				let q = uni.createSelectorQuery().in(this)
				let itemH = q.selectAll('.user-chat-item')
				this.$nextTick(() => {
					itemH.fields({
						size: true
					}, data => {
						if (data) {
							if (isfirst) {
								data.forEach((ret) => {
									this.style.itemH += ret.height
								})
							} else {
								this.style.itemH += data[data.length-1].height
							}
							this.scrollTop = (this.style.itemH > this.style.contentH) ? this.style.itemH : 0
						}
					}).exec()
				})
			},
			async getData() { // 获取用户反馈记录
				let url = `/feedbacklist/${this.page}`
				let [err, res] = await this.$http.get(url, {}, {
					token: true, checkToken: true
				})
				// 错误处理
				if (!this.$http.errorCheck(err, res)) return
				// 成功
				let list = res.data.data.list
				let arr = []
				list.forEach((item, index) => {
					if (item.from_id == this.User.userinfo.id || item.to_id == this.User.userinfo.id) {
						let isme = item.from_id == this.User.userinfo.id
						arr.push({
							isme: isme,
							userpic: isme ? this.User.userinfo.userpic : '../../static/logo.png',
							type: 'text',
							data: item.data,
							time: item.create_time,
							gstime: time.gettime.getChatTime(item.create_time, index > 0 ? list[index-1].create_time : 0)
						})
					}
				})
				this.loadText = list.length <10 ? '没有更多数据了': '点击加载更多'
				this.list = [...arr, ...this.list]
				
				if (this.page === 1 && this.list.length > 0) {
					this.pageToBottom(true)
				}
			},
			async submit(data) { // 发送逻辑
				let [err, res] = await this.$http.post('/feedback', {
					data: data
				}, {
					token: true, checkToken: true
				})
				// 错误处理
				if (!this.$http.errorCheck(err, res)) return
				// 成功处理
				// 构建数据
				let now = new Date().getTime()
				this.list.push({
					isme: true,
					userpic: this.User.userinfo.userpic,
					type: 'text',
					data: data,
					time: now,
					gstime: time.gettime.getChatTime(now, this.list.length > 0 ? this.list[this.list.length - 1].time : 0)
				})
				this.pageToBottom()
				uni.showToast({ title: '反馈成功！' })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-load-more {
		padding: 15rpx;
		color: #BBBBBB;
	}
	.chat-load-more-hover {
		background: #F4F4F4;
	}
</style>
